import { useEffect, useRef } from "react";
import styles from "./index.module.scss";
import initOption from "./options";
import * as echarts from "echarts";
import { useSelector } from "react-redux";
 

export default function EchartsEL(props) {
  const chartRef = useRef();
  const { textColor, xAxisData, seriesData, colorArr } = props;
  const theme = useSelector((state) => state.theme);
  useEffect(() => {
    const option = initOption(textColor,xAxisData, seriesData, colorArr);
    const chart = echarts.init(chartRef.current);
    chart.setOption(option);
    return () => {
      chart.dispose();
    };
  }, [theme]);
  return (
    <>
      <div id="main" ref={chartRef} className={styles.echarts}></div>
    </>
  );
}
